<template>
	<view>
		<view v-show="show" class="guide">
			<image class="jt" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/common/i_icon_click.png" mode="widthFix"></image>
			<view class="pay-main">
				<image class="line" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/common/i_line.png" mode="widthFix"></image>
				<view> 支付宝支付请使用浏览器进行支付,</view>
				<view v-if="isWeixin && !isIOS"> 请在菜单中选择浏览器打开</view>
				<view v-else-if="isWeixin && isIOS"> 请在菜单中选择Safari打开</view>
			</view>
			<view class="footer">
				<view class="btn" @click="goBack">
					支付完成
				</view>
				<view class="wctxt" @click="goBack">
					<text class="wctxt-text">已完成支付？点击此按钮返回上一页面</text>
				</view>
			</view>
			
		</view>
		<div class="body">
		</div>
	</view>
</template>
 
<script>
	import { clearStoreGoodsNum } from "@/until/orderUtils.js" 
	export default {
		data() {
			return {
				show: false,
				isWeixin: false,
				isIOS: false,
				params: undefined,
				clickFlag:false
			};
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '支付宝支付'
			});
		},
		onLoad(options) {
			this.params = options
			this.IsWeixin();
		},
		watch: {
		    '$route' (to, from) {
		      console.log('路由变化:', from, to,'路由变化2:', this.clickFlag); 
		      if(this.clickFlag){
		      	return
		      }
		      this.clickFlag = true 
		      if(this.params.from == 'pay'){
				clearStoreGoodsNum()
		      	uni.switchTab({
		      		url: `/pages/order/index` // 跳转到订单列表
		      	})
		      } else if(this.params.from == 'bookTable') {
		      	uni.redirectTo({
		      		url: '/subpkg/view/myreserVation/myreserVation'
		      	});
		      } else{
		      	uni.setStorageSync('aliPayFinish',1)
		      	uni.navigateBack()
		      	
		      }
		    }
		},
		methods: {
            IsWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				this.isWeixin = /micromessenger/i.test(ua);
				this.isIOS = /iphone|ipad|ipod/i.test(ua);
                //判断当前环境是否为微信浏览器，在微信浏览器中就显示引导页，在外部浏览器直接请求支付
				if (!this.isWeixin) {
					if (this.params) {
						window.location.href = this.params.paymentRes
						// this.getAliPayInfo()
					} else {
						uni.showModal({
							showCancel: false,
							title: '支付参数错误',
							success() {
								uni.navigateBack({});
							}
						})
					}
				} else {
					this.show = true;
				}
			},
			getAliPayInfo(params) {
				let that = this
				// 调用支付宝支付前的参数
                //外部浏览器请求支付接口，此处用的uview封装的请求，没用uview的可用原生request，请求头除token外其他可根据项目自行携带
				uni.$u.http.get('/h5/order/payByAlipay', {
					params: that.params,
					header: {
						token: that.params.token,
						'content-type': 'application/json;charset=UTF-8'
					}
				}).then(res => {
                    //请求跳转期间显示文案
					document.querySelector('body').innerHTML = '正在请求打开支付宝......';
					//拿到支付链接直接前往或打开，我请求成功是后端返回的支付宝支付链接
                    //示例链接：https://payment.5upay.com/receipt/redirect/index/a4d489302bad4875998d4261c9664ec7/da06d2a30fbc43f590bb8cf7076a15eb
                    window.location.href = res
				}).catch(err => {
					console.log('支付接口异常信息：', err);
				})
			},
			
			async goBack(){ 
				if(this.params.from == 'pay'){ 
					await clearStoreGoodsNum() 
					uni.reLaunch({
						url: `/pages/order/index` // 跳转到订单详情
					})
				} else if(this.params.from == 'bookTable') {
					    uni.navigateTo({
					    	url: '/subpkg/view/myreserVation/myreserVation'
					    });
				}  else{
					uni.setStorageSync('aliPayFinish',1)
					uni.navigateBack() 
				}
				this.clickFlag = true
				
			},
		}
	};
</script>
 
<style lang="scss">
	.kb{
		height: 480rpx;
	}
	.btn{
		width: 320rpx;
		height: 80rpx;
		background: var(--dt-backcolorPink);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
		color: var(--maincolor);
	}
	.wctxt{
		margin-top: 20px;
		text{
			// text-decoration: underline;
		}
		.wctxt-text{
			font-size: 28rpx;
			color: #666666;
		}
	}
	
	.guide {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .1);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		color: #fff;
		font-size: 16px;
		padding-top: 150px;
		.jt {
			position: absolute;
			right: 20rpx;
			top: 0rpx;
			width: 39rpx;
			height: 60rpx;
			// margin-left: 600rpx;
			margin-top: 20px;
			margin-bottom: 20px;
			animation: bounce 1s infinite; /* 调用 bounce 动画，周期 1 秒，持续无限次 */
		}
		@keyframes bounce {
			0% {
		     transform: translateY(0); /* 初始位置 */
		   }
		   30% {
		     transform: translateY(-10px); /* 向上跳 10px */
		   }
		   50% {
		     transform: translateY(0); /* 回到原位置 */
		   }
		   70% {
		     transform: translateY(-10px); /* 向上跳 10px */
		   }
		   100% {
		     transform: translateY(0); /* 回到原位置 */
		   }
		}
	}
	.pay-main{
		// width: 600rpx;
		// height: 160rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #212121;
		line-height: 64rpx;
		text-align: center;
		padding: 33rpx 57rpx;
		position: relative;
		.line{
			position: absolute;
			width: 125rpx;
			height: 222rpx;
			top: -222rpx;
			right: 20rpx;
		}
	}
	.footer{
		position: fixed;
		bottom: 200rpx;
	}
</style>